<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/header"/>
<body>

<!--导航-->
<header th:include="common/nav" />
<div class="shopping-cart">
    <div class="cookbook" th:each="cookbook : ${cookbookList}">
        <div class="cover-img"><img class="cover-img" th:src="${cookbook.coverimg}"/></div>
        <div class="title word word-overflow" th:text="${cookbook.cookbookname}"></div>
        <div class="word">共<span class="number" th:text="${cookbook.cookbookFoods.size()}"><span></span></span>种食材</div>
        <div class="word">购买价:<span class="number cookbookMoney" th:text="${cookbook.foodPrice}"></span>元/份</div>
        <div class="word"><input class="number-input cookbookNumber"  oninput="sumMoney();" type="number" max="5" min="1" value="1"/>份</div>
        <div class="word buy">购买<span class="buy-checkbox unselect" isSelect="false" th:data="${cookbook.foodPrice}"></span></div>
        <div th:data="${cookbook.id}" class="deleteShopCat"></div>
        <div class="word view-details">查看详情</div>
        <div class="details">
            <table class="foodTable content">
                <thead>
                    <tr>
                        <th>食材名称</th>
                        <th>重量（克）</th>
                        <th>金额（元）</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="cookbookFood : ${cookbook.cookbookFoods}">
                        <td th:text="${cookbookFood.food.food}"></td>
                        <td th:text="${cookbookFood.weight}"></td>
                        <td th:text="${cookbookFood.food.price}"d></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="purchase">
    <div class="buy-box">
        <span id="buy" class="buy">下单&nbsp;&nbsp;合计：<span id="sumMoney">0.0</span>元</span>
    </div>
</div>


<div th:include="common/bottom"></div>
</body>
    <script th:src="@{/js/shoppingCart.js}"></script>
    <link rel="stylesheet" th:href="@{/css/shoppingCart.css}"/>
</html>